<template>
    <div class="bookshelf">
        <header id="header">
            <a href="javascript:history.go(-1)" class="back">
                <div class="iconfont icon-back"></div>
            </a>
            <h1 class="title"></h1>
            <nav class="sexbtn">
                <h3>
                    <a href="#" :class="[ishistory?'btn-tab':'btn-tab active']" @click="ishistory=false">我的书架</a>
                </h3>
                <h3>
                    <a href="#" :class="[!ishistory?'btn-tab':'btn-tab active']" @click="ishistory=true;isedit=false">最近阅读</a>
                </h3>
            </nav>
            <div class="operate">
                <router-link to="/search" tag="span"  class="iconfont icon-search"></router-link>
                <span href="#" class="iconfont icon-menu"></span>
            </div>
        </header>
        <div class="bookshelfcontent">
            <div class="shelf">
                <div class="shelfheader">
                    <div class="header1">
                        <span class="shelfnum" v-if="!ishistory">书架({{shelflist.length}})</span>
                        <span class="shelfnum" v-if="ishistory">历史({{historylist.length}})</span>
                        <span class="edit" @click="edit()" v-if="!ishistory">编辑</span>
                        <span class="edit" v-if="ishistory" @click="clearhistory()">清空</span>
                    </div>
                </div>
                <div class="bookli" v-for="(item,index) in (ishistory?historylist:shelflist)" :key="index">
                    <span  class="iconfont icon-xuanze1 select1" @click="selectdel(index)" v-if="!item.select"></span>
                    <span  class="iconfont icon-xuanze select1 red" @click="selectdel(index)" v-if="item.select"></span>
                    <router-link :to="{path:'/detail',query:{id:item._id}}" :class="['img',{'trx':isedit}]">
                    <img :src="'http://statics.zhuishushenqi.com'+item.cover" alt="">
                    </router-link>
                    <router-link :to="{path:'/detail',query:{id:item._id}}" :class="['right',{'trx2':isedit}]">
                        <div class="title"><h4>{{item.title}}</h4>  </div>
                        <div class="bookinfo">
                            <p><span class="iconfont icon-zuozhe"></span> {{item.author}}</p>
                        </div>
                    </router-link>
                    <span class="ljbox">立即阅读<span class="iconfont icon-you"></span></span>
                </div>
            </div>
            <div class="unlogin" v-if="!islogin">
                <router-link to="/login" class="gologin">登录</router-link>
                <p class="gologintext">登录后实时同步进度</p>
            </div>
        </div>
        <div class="shelffooter" v-if="isdel">
            <div @click="del()">删除</div>
        </div>
    </div>
</template>
<script>
import {getBook} from '../api/index.js'
export default {
    data() {
        return {
            islogin:false,
            isedit:false,
            isdel:false,
            ishistory:false,
            shelflist:[],
            historylist:[]
        }
    },
    methods: {
        clearhistory(){
            this.historylist = [];
            window.localStorage.removeItem('historylist');
        },
        getsheldlist(){
            let idlist = window.localStorage.getItem('shelflist').split(',');
            for(let i =0;i<idlist.length;i++){
                getBook(idlist[i]).then(data=>{
                    // console.log(data);
                    this.shelflist.push(data);
                })
            }
        },
        gethistorylist(){
            let idlist = window.localStorage.getItem('historylist').split(',');
            for(let i =0;i<idlist.length;i++){
                getBook(idlist[i]).then(data=>{
                    // console.log(data);
                    this.historylist.push(data);
                })
            }
        },
        edit(){
            this.isedit =!this.isedit;
            this.shelflist.forEach(item=>{
                item.select = false;
            })
        },
        selectdel(id){
            // this.shelflist.forEach(element => {
            //     element.select = false;
            // });
            // console.log(this.shelflist)
            this.shelflist[id].select = !this.shelflist[id].select
            let is = this.shelflist.every(item=>{
                return item.select == false;
            })
            if(is){
                this.isdel=false;
            }else{
                this.isdel=true;
            }
            // console.log(this.shelflist[id].select);
            this.$forceUpdate();
        },
        del(){
           let result = this.shelflist.filter(item=>{
               return item.select==false;
           })
           this.shelflist=result;
           console.log(this.shelflist);
           let list = []
           this.shelflist.forEach(item=>{
               list.push(item._id);
           })
           if(list.length>0){
               window.localStorage.setItem("shelflist",list)
           }else{
               window.localStorage.removeItem("shelflist");
           }
           this.isdel=false;
            this.$forceUpdate();
        }
    },
    created(){       
        if(window.sessionStorage.getItem("login")){
            this.islogin=true;
            if(window.localStorage.getItem("shelflist")){
                this.getsheldlist();
            }
            if(window.localStorage.getItem("historylist")){
                this.gethistorylist();
            }          
        }
        console.log(this.islogin);
    },
    watch:{
        $route() {
            this.islogin=false;
            if(window.sessionStorage.getItem("login")){
                console.log(window.sessionStorage.getItem("login"));
            this.islogin=true;
        }
        
        }   
    },
}
</script>
<style lang="less">
.bookshelf{
    #header{
    position: relative;
    box-sizing: border-box;
    height: 2.75rem;
    padding-top: .6875rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid #f0f1f2;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    .back{
        display: inline-block;
        padding-left: 12px;
        .iconfont{
            font-size: 18px;
        }
    }
    .title{
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.375rem;
    position: absolute;
    left: 2.6875rem;
    overflow: hidden;
    max-width: 60%;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
    .btn-tab{
    font-size: .8125rem;
    
    display: block;
    line-height: 1.6875rem;
    padding: 0 .75rem !important;
    text-align: center;
    color: #ed424b;
    border: 1px solid #ed424b;
    font-weight: normal !important;
}
    .sexbtn>h3:last-child>.btn-tab{
    border-radius: 0 4px 4px 0;
}
.sexbtn>h3:first-child>.btn-tab{
    border-radius: 4px 0 0 4px;
}
.active{
    color: #fff;
    background-color: #ed424b;
}
.sexbtn{
    display: flex;
    // margin-top: -4px;
    // margin-left: 40px;
    position: absolute;
    top: 21%;
    left: 31%;
    a{
        // font-size: 14px;
        font-weight: normal;
    }
}
.logo-a{
    padding: 0 1rem;
}
.logo{
    font-size: 18px;
    color: black;   
}
.operate{
    height: 2rem;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    line-height: 1.5rem;
    // padding: .25rem .375rem;
    // margin-left: 68px;
    /* margin-top: 4px; */
}
.operate span{
    display: inline-block;
    height: 24px;
    width: 24px;
    /* background-color: red; */
    margin-right: 6px;
    font-size: 16px;
    // color: #ed424b;
}
.operate span:last-child{
    font-size: 24px;
}
}
.bookshelfcontent{
    position: relative;
    min-height: calc(100vh - 10.75rem);
    .unlogin{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -3rem;
    text-align: center;
    .gologin{
    width: 17.5rem;
    font-size: .875rem;
    line-height: 2.25rem;
    display: inline-block;
    text-align: center;
    color: #fff;
    border-radius: 99px;
    background-color: #ed424b;
    }
    .gologintext{
    color: #969ba3;
    font-size: .875rem;
    margin-top: .75rem;
    }
}
    }
    .bookshelfcontent{
        .shelf{
            .shelfheader{
                    position: relative;
                    // height: 1.75rem;
                    padding: .5rem 1rem;
                    line-height: 1.75rem;
                    z-index: 2;
                    right: 0;
                    left: 0;
                    border-bottom: 1px solid #f0f1f2;
                    background-color: #fff;
                    .header1{
                        display: flex;
                        justify-content: space-between;
                        .shelfnum{
                            display: inline-block;
                            overflow: hidden;
                            max-width: 50vw;
                            vertical-align: bottom;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            font-size: .875rem;
                            font-weight: 700;
                            // line-height: 1.25rem;
                            color: #000;
                        }
                        .edit{
                            font-size: .875rem;
                            color: #000;
                        }
                    }
            }
        }
    }
    .bookli{
        padding: 0 1rem;
        position: relative;
        display: block;
        overflow: hidden;
        // padding: 1rem;
        // -webkit-transition: padding-left .15s;
        transition: .15s;
        .select1{
            font-size: 1rem;
            position: absolute;
            box-sizing: border-box;
            width: 2rem;
            height: 2rem;
            -webkit-transition: background-color .15s,border-color .15s;
            transition: background-color .15s,border-color .15s;
            -webkit-transform: scale(.5);
            transform: scale(.5);
            color: #fff;
            border: 1px solid #c0c5cc;
            border-radius: 2rem;
            background-color: #fff;
            left: .5rem;
    margin-top: 2.25rem;
        }
        .red{
            font-size: 2rem;
            color: #ed424b;
            border-color: transparent;
        }
        .img{
            position: absolute;
            top: 1rem;
            white-space: nowrap;
            transition: .15s;
            img{
                width: 3.375rem;
                height: 4.5rem;
                box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
                transition: .15s;
            }
        }
        .right{
            display: block;
            min-height: 4.5rem;
            margin: 0 -1rem;
            padding: 1rem 1rem 1rem 5.125rem;
            transition: .15s;
            .title{
                // position: absolute;
                top: 1rem;
                right: 4.125rem;
                left: 4.125rem;
                
                h4{     
                    display: inline-block;
                        font-size: 1rem;
                        color: #000;
                        line-height: 2;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 8rem;
                }
                span{
                        // display: inline-block;
                        font-size: .8125rem;
                        line-height: 1.5rem;
                        float: right;
                }
            }
            .bookinfo{
                font-size: .875rem;
                color: #969ba3;
                margin-top: 20px;
            }
        }
    }
    .trx{
        transform: translateX(2rem);
    }
    .trx2{
        transform: translateX(2rem);
    }
    .ljbox{
                    position: absolute;
                    top: 1rem;
                    left: 18.75rem;
                    font-size: .8125rem;
                        line-height: 1.5rem;
                        float: right;
                        color: #969ba3;
                }
    .shelffooter{
        position: fixed;
        // height: 2rem;
        z-index: 100;
        background-color: #fff;
        bottom: 0;
        width: 100%;
        padding: 0.5rem 0;
        div{
            width: 80%;
            margin: 0 auto;
            height: 100%;
            background-color: #ed424b;
            color: #fff;
            text-align: center;
            line-height: 2rem;
            border-radius: 20px;
        }
    }
}
</style>